<template>
  <div>
    <div class="home_search">
      <img @click="sideshow=true" src="../../assets/logo.png" alt="">
        <van-search
            v-model="seaText"
            placeholder="请输入搜索关键词"
            @search="inpchange"
          >
          </van-search>
        <button>
           <van-icon name="search"></van-icon>
        </button>
    </div>
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in bannerList" :key="index">
        <img :src="'http://localhost:3000'+item.Cpic" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 好评榜 -->
    <list-com :listdata="goodList" :title="'好评榜'" :titlecolor="'blue'"></list-com>
    <hr>
    <!-- 最新课程 -->
    <list-com :listdata="newList" :title="'最新课程'" :titlecolor="'red'"></list-com>
    <hr>
    <!-- 全部课程 -->
    <list-com :listdata="chooseList" :title="'全部课程'" :titlecolor="'green'"></list-com>
    <div style="padding-bottom:50px;"></div>
    <van-popup
      v-model="sideshow"
      closeable
      position="left"
      :style="{ height: '100%',width:'80%' }"
    >
      <div class="pop_wrap">
          <div class="pop_des">
             <img src="../../assets/logo.png" alt="">
             <h1>进思在手，应有尽有</h1>
          </div>
      </div>
      <div class="icon_list">
          <div class="icon_one">
            <van-icon size="50px" name="friends-o"></van-icon>
            <h1>开通会员</h1>
          </div>
          <div class="icon_one">
            <van-icon  size="50px" name="gem-o"></van-icon>
            <h1>个性装扮</h1>
          </div>
           <div class="icon_one">
            <van-icon  size="50px" name="bag-o"></van-icon>
            <h1>我的文件</h1>
          </div>
           <div class="icon_one">
            <van-icon  size="50px" name="setting-o"></van-icon>
            <h1>设置</h1>
          </div>
        </div>
    </van-popup>
  </div>
</template>
<script>
import {getIndexData} from '../../api/home'
import listCom from './list.vue'
export default {
  data(){
    return{
      sideshow:false,//侧边栏显示隐藏的变量
      seaText:"",
      bannerList:[],//轮播数据
      chooseList:[],//全部课程
      goodList:[],//好评榜单
      newList:[],//最新课程
    }
  },
  components:{
    listCom
  },
  created(){
    this.getData();
  },
  methods:{ 
    inpchange(){
      // 主页搜索触发
      this.$router.push({name:"courselist",query:{seaText:this.seaText}})
    },
    // 获取主页需要的所有数据
    async getData(){
      var res=await getIndexData()
      console.log(res)
      this.bannerList=res.data.bannerList;
      // 所有课程数据  
 
      // istop 属性的数据 向前排序
     res.data.chooseList.forEach((item,index)=>{
        if(item.isTop){
              this.chooseList.unshift(item)
        }else{
              this.chooseList.push(item)
        }
     })

      this.newList=res.data.newList;
      this.goodList=res.data.goodList;
    } 
  }
}
</script>
<style lang="less">
.icon_one{
  width: 100%;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid black;
  display: flex;
  padding-left: 30px;
  box-sizing: border-box;
  i{
    margin-top: 10px;
  }
  h1{
    margin-left: 20px;
  }
}
.pop_wrap{
  width: 90%;
  margin-top:30px;
  margin: 80px auto 80px;
  .pop_des{
    display: flex;
    img{
      width: 60px;
      height: 60px;
      border-radius:50% ;
      vertical-align: middle;
    }
    h1{
      line-height: 60px;
      margin-left: 5px;
    }
  }
}
  .home_search{
    background: white;
    display: flex;
    height: 70px;
    justify-content: space-around;
    img{
      width:50px;
      height: 50px;
      border-radius:50%;
      margin-top:10px;
    }
  input{
    width:200px;
  }
    button{
      width: 30px;
      height: 40px;
      margin-top:10px;
    }
  }
   .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 200px;
    height: 200px;
    text-align: center;
    background-color: #39a9ed;
    img{
      width: 100%;
      height: 200px;
    }
  }
</style>